<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" class="list">
      <el-table-column prop="id" label="景点id" width="70"></el-table-column>
      <el-table-column prop="title" label="景点名"></el-table-column>
      <el-table-column prop="content" label="景点内容"></el-table-column>
      <el-table-column prop="main_img" label="主显示图地址"></el-table-column>
      <el-table-column prop="viewed" label="观看数" width="70"></el-table-column>
      <el-table-column prop="price" label="原价" width="50"></el-table-column>
      <el-table-column prop="price_discount" label="折后价" width="70"></el-table-column>
      <el-table-column prop="stars" label="评分" width="50"></el-table-column>
      <el-table-column prop="sort" label="排序" width="50"></el-table-column>
      <el-table-column prop="status" label="状态" width="70"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="small" @click="$emit('change',scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="small" type="primary" @click="$emit('toPhotoList',scope.row)">图片</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "AttrList",
  props: ["attrList"],
  data() {
    return {}
  },
  computed: {
    tableData: function() {
      let arr = [];
      this.attrList.forEach(item => {
        let _item = { ...item };
        if (_item.status == 1) {
          _item.status = "正常";
        } else if (_item.status == 0) {
          _item.status == "删除";
        }
        arr.push(_item);
      });
      return this.attrList;
    }
  },
  methods: {
    handleDelete(attrObj) {
      let isDel = false;
      this.$confirm(`确认删除"${attrObj.title}"的数据吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            let data = await this._axios.post("/ycwAdmin/attraction/delAttr", {
              attrId: attrObj.id
            });
            instance.confirmButtonLoading = false;
            if (data.data.code) {
              isDel = true;
              done();
            } else {
              done();
            }
          } else {
            done();
          }
        }
      })
        .then(() => {
          if (isDel) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.$emit("refresh");
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
          // this.$emit("refresh");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scopted>
.list {
  height: 60vh;
  overflow-y: scroll;
  &::before {
    display: none;
  }
}
</style>